<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-guidance-add">
        <input id="treeId" name="parentId" type="hidden" th:value="${guidanceNode.tsGuidanceId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label ">上级目录：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" onclick="selectGuidanceTree()" id="treeName" readonly="true"
                           th:value="${guidanceNode.guidanceName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" id="itemName">事项分类名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="guidanceName" id="guidanceName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">指南类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" id="mulu">
                    <input type="radio" th:id="103" name="guidanceType"
                           th:value="M">
                    <label th:for="103" th:text="目录"></label>
                </div>
                <div class="radio-box" id="zhinan">
                    <input type="radio" th:id="104" name="guidanceType" th:value="W" th:checked="checked">
                    <label th:for="104" th:text="事项文档"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传科室图标：</label>
            <div class="col-sm-3" id="iconUrl">
                <input id="file-icon" type="file" name="iconFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传办事指南文档：</label>
            <div class="col-sm-8" id="docUrl">
                <input style="height: 50px;width:50px" id="file-doc" type="file" name="docFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传示范文档：</label>
            <div class="col-sm-8" id="docUrl2">
                <input style="height: 50px;width:50px" id="file-doc2" type="file" name="docFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传空白文档：</label>
            <div class="col-sm-8" id="docUrl3">
                <input style="height: 50px;width:50px" id="file-doc3" type="file" name="docFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" required>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script>
    var prefix = ctx + "system/touchscreen/guidance";
    var treeid = $("#treeId").val();
    $(function () {
        var type = $('input[name="guidanceType"]:checked').val();
        show2Hide(type);
        $(":radio").on('ifChecked',
            function (event) {
                var guidanceType = $(event.target).val();
                show2Hide(guidanceType);
            });
    });
    $(document).ready(function () {
        initUploadDoc();
        initUploadIcon();
    });
    $("#form-guidance-add").validate({
        onkeyup: false,
        rules: {
            guidanceName: {
                required: true
            },
            orderNum: {
                digits: true,
                required: true
            },
        },
        focusCleanup: true
    });
    var filedocs1 = [];
    var filedocs2 = [];
    var filedocs3 = [];

    function initUploadDoc() {
        $('#file-doc').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            dropZoneEnabled: false,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs1.push(map);
            console.log(filedocs1);
        });
        $('#file-doc2').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            dropZoneEnabled: false,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs2.push(map);
            console.log(filedocs2);
        });
        $('#file-doc3').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            dropZoneEnabled: false,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs3.push(map);
            console.log(filedocs3);
        });
    }
    var FileUrl;
    function initUploadIcon() {
        var control = $('#file-icon');
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadIcon",
            theme: "fa",
            height: 300,
            width: 500,
            maxFileCount: 1,
            allowedFileExtensions: ['png', 'jpg', 'jpeg'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            showRemove: false,
            autoReplace: false,
            uploadAsync: true,
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            FileUrl = res.iconUrl;
            console.log(FileUrl);
        });
    }

    function submitHandler() {
        var type = $('input[name="guidanceType"]:checked').val();
        var parentId = $('#treeId').val();
        if (parentId == 0) {
            if (type != "M") {
                alert('根目录不允许建立事项指南');
            } else {
                validataFormSubmit(type);
            }
        } else {
            validataFormSubmit(type);
        }
    }

    function validataFormSubmit(type) {
        if ($.validate.form()) {
            if (type != "M") {
                var files = {};
                files["Z"] = filedocs1;
                files["S"] = filedocs2;
                files["K"] = filedocs3;
                console.log(JSON.stringify(files));
                var data = $("#form-guidance-add").serializeArray();
                data.push({"name": "files", "value": JSON.stringify(files)});
                $.operate.save(prefix + "/add", data);
            } else {
                var data = $("#form-guidance-add").serializeArray();
                data.push({"name": "iconUrl", "value": FileUrl});
                $.operate.save(prefix + "/add", data);
            }
        }
    }

    function show2Hide(type) {
        if (type == "M") {
            $("#itemName").html("事项分类名称：");
            $("#docUrl").parents(".form-group").hide();
            $("#docUrl2").parents(".form-group").hide();
            $("#docUrl3").parents(".form-group").hide();
            $("#iconUrl").parents(".form-group").show();
        } else {
            $("#itemName").html("事项名称：");
            $("#iconUrl").parents(".form-group").hide();
            $("#docUrl").parents(".form-group").show();
            $("#docUrl2").parents(".form-group").show();
            $("#docUrl3").parents(".form-group").show();
        }
    }

    /*菜单管理-新增-选择菜单树*/
    function selectGuidanceTree() {
        var treeId = $("#treeId").val();
        var guidanceId = treeId > 0 ? treeId : 0;
        var url = prefix + "/selectGuidanceTree/" + guidanceId;
        var options = {
            title: '事项选择',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        if (body.find('#treeId').val() != 0) {
            $("#iconUrl").parents(".form-group" ).hide();
            $("#itemName").html("事项名称：");
        }
        layer.close(index);
    }
</script>
</body>
</html>
